import React from "react";
import TreeDom from "components/tree"
import { Button,message ,Modal} from 'antd';
import "./indx.less"
import {
    FormModal
} from 'components/modalForm'
import axios from "axios";
const confirm = Modal.confirm
axios.interceptors.request.use(function (config) {    // 这里的config包含每次请求的内容
    var type = sessionStorage.getItem("user_token");
    config.headers.user_token = type;

    return config;
}, function (err) {
    return Promise.reject(err);
});


export default class Menu extends React.Component{
    state={
        getData:[],
        keyData:[],
        parentId:"",
        info:{},
        modalAdd:false,
        modalUpdate:false,
        item:{}
    }
    componentDidMount(){
        this.getData();
    }
    getData = ()=>{
        axios.get(`/auth/menus`).then( (res) =>{
            this.setState({
                getData : res.data
            })
        })
    }
    onAdd=(selectedKeys,info)=>{
        if(selectedKeys){
            this.setState({
                info:info,
                keyData:selectedKeys,
                parentId:info.node.props.parentId
            })
        }
    }
    onUpdateModel=()=>{
        if(this.state.keyData.length>0){
            let ids = this.state.keyData[0];
            axios.get(`/auth/menus/${ids}`).then((res)=>{
                console.log(res.data);
                this.setState({
                    modalUpdate:true,
                    item:res.data
                })
            })

        }else{
            alert("请选择...")
        }


    }
    onDetele=()=>{
        if(this.state.keyData.length>0){
            confirm({
                title:"提示",
                content: '确定删除吗',
                onOk:()=>{
                    axios.delete(`/auth/menus/${this.state.keyData[0]}`).then(()=>{

                        this.getData();
                        message.success('删除成功');
                    })
                },
                onCancel() {}
            })

        }else{
            alert("请选择...")
        }


    }
    onAddModel=()=>{
        this.setState({
            modalAdd:true,
        })
    }
    fieldsUpdate=()=>{


       let oId= this.state.parentId?this.state.parentId:this.state.keyData[0];
        return [{
            name: 'parentId',
            options:{
                initialValue: oId,
            }
        },{
            label: `菜单`,
            type: 'input',
            name: 'name',
            items:this.state.item.name,
            options: {
                initialValue:this.state.item.name,
                rules: [{
                    required: true,
                    message: '请输入菜单!',
                }]
            }
        }, {
            label: "路径",
            type: 'input',
            name: 'resource',
            items:this.state.item.resource,
            options: {
                initialValue:this.state.item.resource,
                rules: [{
                    required: true,
                    message: '请输入路径!',
                }]
            }
        }, {
            label: "顺序",
            type: 'input',
            name: 'position',
            items:this.state.item.position,
            options: {
                initialValue:this.state.item.position,
                rules: [{
                    required: true,
                    message: '请输入数字!',
                }]
            }
        },{
            label: "描述",
            type: 'input',
            name: 'description',
            items:this.state.item.description,
            options: {
                initialValue:this.state.item.description,
                rules: [{
                    required: true,
                    message: '请输入描述!',
                }]
            }
        }]

    }
    fieldsAdd=()=>{
        let oId= this.state.parentId?this.state.parentId:this.state.keyData[0];
            return [{
                name: 'parentId',
                options:{
                    initialValue: oId,
                }
            },{
                label: `菜单`,
                type: 'input',
                name: 'name',
                options: {
                    rules: [{
                        required: true,
                        message: '请输入菜单!',
                    }]
                }
            }, {
                label: "路径",
                type: 'input',
                name: 'resource',
                options: {
                    rules: [{
                        required: true,
                        message: '请输入路径!',
                    }]
                }
            }, {
                    label: "顺序",
                    type: 'input',
                    name: 'position',
                    options: {
                        rules: [{
                            required: true,
                            message: '请输入数字!',
                        }]
                    }
                }]


    }
    onOkAdd=(params)=>{

        axios.post(`/auth/menus`,{
            name:params.name,
            resource:params.resource,
            position:params.position,
            parentId:params.parentId
        }).then( ()=>{
            this.getData();
            this.setState({
                modalAdd:false
            });

        })

    }
    onOkUpdate =(item)=>{

            let sId =this.state.keyData[0];

            axios.put(`/auth/menus/${sId}`,{
                parentId:this.state.parentId,
                name:item.name,
                resource:item.resource,
                position:item.position,
                description:item.description
            }).then(()=>{
                this.getData();
                this.setState({
                    modalUpdate:false
                });

            })



    }
    onCancelUpdate =()=>{
        this.setState({
            modalUpdate:false
        })
    }
    onCancelAdd=()=>{
        this.setState({
            modalAdd:false
        })
    }

    render(){
      return (
          <div>
                <div>
                    <Button onClick={this.onAddModel} className="mar">添加</Button>
                    <Button onClick={this.onUpdateModel} className="mar">修改</Button>
                    <Button  onClick={this.onDetele} >删除</Button>
                </div>
              <TreeDom  getData={this.state.getData}  onAdd={this.onAdd} />
              <FormModal modalKey="add"
                         visible={this.state.modalAdd}
                         title="添加"
                         fields={this.fieldsAdd()}
                         onOk={this.onOkAdd}
                         onCancel={this.onCancelAdd}
                         okText="保存" />
              <FormModal />
              <FormModal modalKey="update"
                         visible={this.state.modalUpdate}
                         title="修改"
                         fields={this.fieldsUpdate()}
                         onOk={this.onOkUpdate}
                         onCancel={this.onCancelUpdate}
                         okText="保存" />
              <FormModal />
          </div>
      )

    }
}